<template>
  <div class="teachMater">
    <!-- 面包屑-->
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '#' }">书法教学</el-breadcrumb-item>
      <el-breadcrumb-item>书法课件</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="articlePage">
      <el-table :data="tableData">

        <el-table-column
          prop="title"
          label="课件名称">
        </el-table-column>
        <el-table-column label="课件封面" align="center" prop="cover">
          <template slot-scope="scope">
            <image-preview :src="scope.row.cover" :height="150"/>
          </template>
        </el-table-column>
        <el-table-column
          prop="fileContent"
          label="课件描述" width="300" align="center">

        </el-table-column>
        <el-table-column
          prop="link"
          label="来源"
          width="200" align="center">
        </el-table-column>
        <el-table-column
          prop="createDate"
          label="发布时间"
          width="100">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="watchFile(scope.row.fileUrl)">查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>
import { listMaterial } from '@/api/teach/course/material'

export default {
  name: 'TeachingMaterialsPage',
  data () {
    return {
      tableData: [],
      total: 0,
      newsList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 6,
      },
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList () {
      this.loading = true
      listMaterial(this.queryParams).then(response => {
        this.tableData = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    watchFile (fileUrl) {
      window.open(fileUrl, '_blank');
    }

  }
}
</script>

<style lang="scss" scoped>
.teachMater{
  text-align: center;
}
.page {
  text-align: center;
  margin-top: 30px;

  ::v-deep .number.active {
    background-color: #337ab7 !important;
  }
}
</style>
